<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">

<head>
    <th:block th:include="common/head::head"></th:block>
    <style>
        .header {
            height: 50px;
        }

        .filePath {
            margin-top: 15px;
            margin-left: 30px;
            float: left;
            font-size: 16px;
        }

        .btn_Div {
            float: right;
            width: 290px;
            margin-right: 20px;
        }

    </style>
</head>
<body>
<div class="header">
    <label class="filePath">
        <label>文件路径：</label>
        <label id="file_Path">/</label>
    </label>
    <label class="btn_Div">
        <button type="button" id="goBack" class="layui-btn">返回上一级</button>
        <button type="button" id="refresh" class="layui-btn">刷新</button>
        <button type="button" id="uploadFile" class="layui-btn">上传文件</button>
    </label>
</div>
<table class="layui-table" id="table" lay-filter="table" style="margin: 0;"></table>
</body>
<script type="text/html" id="bar_monitor">
    <a href="javascript:;" class="layui-btn  layui-btn-sm  layui-btn-warm" lay-event="terminal">终端</a>
    {{# if(!d.path){ }}
    <a href="javascript:;" class="layui-btn  layui-btn-sm  layui-btn-danger" lay-event="delete">删除</a>
    {{# } }}
    {{# if(!d.dir){ }}
    <a href="javascript:;" class="layui-btn  layui-btn-sm layui-btn-normal" lay-event="download">下载</a>
    {{# } }}
</script>
<script type="text/javascript">
    var id = getQueryString("id");
    var pathArray = [];
    var nowPath = '';
    var rootPath;
    var col = [
        {field: 'title', title: '文件名称', event: 'rowClick'},
        {
            field: 'dir', title: '文件类型', event: 'rowClick', templet: function (d) {
                if (d.dir) {
                    return '文件夹';
                }
                return '文件';
            }
        },
        {field: 'size', title: '文件大小', event: 'rowClick'},
        {field: 'modifyTime', title: '修改时间', event: 'rowClick'},
        {field: 'op', title: '操作', align: 'center', toolbar: '#bar_monitor', fixed: 'right'}
    ];

    function loadSuccess() {
        var successNum;

        loadRootPath();

        function reloadTable(path, children) {
            loadPath();
            table.reload('table',
                {
                    url: "./list_file_data.json",
                    where: {
                        id: id,
                        path: path,
                        children: children
                    }
                });
        }

        // 表格工具条事件
        table.on('tool(table)', function (obj) {
            var data = obj.data;
            var event = obj.event;
            if (!data) {
                return;
            }
            if ('download' === event) {
                // 下载
                if (!data.dir) {
                    window.open("./download.html?id=" + id + "&path=" + rootPath + "&name=" + data.parentDir);
                }
            } else if ('terminal' === event) {
                let parentDir = formatePath(data.parentDir);
                var tailPtah = rootPath + parentDir;
                if (!rootPath) {
                    tailPtah = data.path;
                }
                tabChange({
                    id: id + tailPtah,
                    url: './node/ssh/terminal.html?id=' + id + "&tail=" + tailPtah,
                    title: data.name + ' - 文件终端',
                });
            } else if ('delete' === event) {
                let path = rootPath;
                let name = data.parentDir;
                if (!rootPath) {
                    path = data.path;
                    name = "";
                }
                let msg = "确认删除" + data.name + "文件？";
                if (data.dir) {
                    msg = "确认删除" + data.name + "文件夹及目录下所有文件？";
                }
                layer.confirm(msg, {
                    title: '系统提示'
                }, function (index) {
                    //关闭所有页面层
                    layer.closeAll('page');
                    // 删除文件
                    loadingAjax({
                        url: './delete.json',
                        data: {
                            id: id,
                            path: path,
                            name: name
                        },
                        success: function (data) {
                            layer.msg(data.msg);
                            reloadTable(rootPath, nowPath);
                        }
                    });
                });
            } else if ("rowClick" === event) {
                //表格行点击
                if (data.dir) {
                    let json = {
                        name: data.name,
                        path: data.parentDir
                    };
                    pathArray.push(json);
                    if (data.path) {
                        rootPath = data.path;
                        reloadTable(rootPath, "/")
                    } else {
                        reloadTable(rootPath, data.parentDir)
                    }
                }
            }
        });

        //加载添加的白名单目录
        function loadRootPath() {
            let dirsStr = "[[${dirs}]]";
            if (!dirsStr) {
                return;
            }
            dirsStr = dirsStr.replace(/&quot;/g, "\"");
            let dirs = JSON.parse(dirsStr);
            for (let i = 0; i < dirs.length; i++) {
                let dir = dirs[i];
                let path = dir.path;
                dir.dir = true;
                dir.title = path + "【文件夹】";
                dir.name = path;
                dir.parentDir = "/";
            }
            tableRender({
                id: 'table',
                elem: '#table',
                cols: [col],
                data: dirs
            });
            loadPath();
        }

        //渲染路径
        function loadPath() {
            let dom = $("#file_Path");
            if (pathArray.length === 0) {
                dom.html('/');
                return;
            }
            let htmlStr = '';
            for (let i = 0; i < pathArray.length; i++) {
                let item = pathArray[i];
                let name = formatePath(item.name);
                let path = item.path;
                nowPath = path;
                let str = "<label class=\"itemPath\" data-path=\"" + path + "\" title=\"" + rootPath + path + "\">" + name + "</label>";
                if (i > 0) {
                    htmlStr += "<label> > </label>";
                }
                htmlStr += str;
            }
            dom.html(htmlStr);
        }

        //路径点击事件
        $('#file_Path').on('click', '.itemPath', function () {
            let _this = $(this);
            let path = _this.attr('data-path');
            let len = pathArray.length;
            for (let i = 0; i < len; i++) {
                let item = pathArray[i];
                if (!item) {
                    break;
                }
                let itemPath = formatePath(item.path);
                path = formatePath(path);
                if (path === itemPath) {
                    pathArray.splice(i + 1, len - i);
                }
            }
            loadPath();
            reloadTable(rootPath, path);
        });

        //上传文件
        uploadRender({
            elem: '#uploadFile',
            accept: 'file',
            data: {
                id: id,
                name: function () {
                    return nowPath;
                },
                path: function () {
                    return rootPath;
                }
            },
            multiple: true,
            url: './upload',
            choose: function (obj) {
                successNum = 0;
            },
            allDone: function (obj) {
                if (rootPath) {
                    reloadTable(rootPath, nowPath);
                }
                layer.msg("文件总数：" + obj.total + " 成功上传：" + successNum + " 上传失败：" + obj.aborted);
            },
            done: function (res, index, upload) {
                if (res.code !== 200) {
                    layer.msg(res.msg);
                } else {
                    successNum++;
                }
            }
        });

        //返回上一级
        $("#goBack").click(function () {
            let len = pathArray.length;
            if (len === 0) {
                return;
            } else if (len === 1) {
                rootPath = null;
                pathArray = [];
                loadRootPath();
                return;
            }
            let item = pathArray[len - 2];
            let path = item.path;
            reloadTable(rootPath, path);
            pathArray.splice(len - 1, 1);
            loadPath();
        });

        $("#refresh").click(function () {
            if (rootPath) {
                reloadTable(rootPath, nowPath);
            } else {
                window.location.reload();
            }
        });
    }

    function formatePath(path) {
        if (!startWith(path, "/") && !startWith(path, "\\")) {
            path = "/" + path;
        }
        return path;
    }

    function startWith(str, suffix) {
        if (typeof str == 'string') {
            return str.slice(0, suffix.length) == suffix;
        }
        return false;
    }
</script>
</html>